<!--
 * @Description: 系统首页
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:02
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:01:06
-->
<template>
  <div>
    <div class="head">
      <div class="one one1">
        <div style="height: 54px; margin: 20px 10px 0px 10px; ">
          <ul v-for="(item, index) in CountData" :key="item.type">
            <!-- <li v-if="item.type == '设备总数'"> -->
            <li style="list-style: none;" v-if="index == 0">
              {{ item.type }}
            </li>
          </ul>
        </div>
        <div style="height: 16px; margin: 0px 10px 0px 10px; text-align: right">
          <ul v-for="(item, index) in CountData" :key="item.type">
            <li style="list-style: none" v-if="index == 0">
              {{ item.value }}
            </li>
          </ul>
        </div>
      </div>
      <div class="one two">
        <div style="height: 54px; margin: 20px 10px 0px 10px; ">
          <ul v-for="(item, index) in CountData" :key="item.type">
            <li class="li" style="list-style: none" v-if="index == 1">
              {{ item.type }}
            </li>
          </ul>
        </div>
        <div style="height: 16px; margin: 0px 10px 0px 10px; text-align: right">
          <ul v-for="(item, index) in CountData" :key="item.type">
            <li style="list-style: none" v-if="index == 1">
              {{ item.value }}
            </li>
          </ul>
        </div>
      </div>
      <div class="one three">
        <div style="height: 54px; margin: 20px 10px 0px 10px; ">
          <ul v-for="(item, index) in CountData" :key="item.type">
            <li style="list-style: none" v-if="index == 2">
              {{ item.type }}
            </li>
          </ul>
        </div>
        <div style="height: 16px; margin: 0px 10px 0px 10px; text-align: right">
          <ul v-for="(item, index) in CountData" :key="item.type">
            <li style="list-style: none" v-if="index == 2">
              {{ item.value }}
            </li>
          </ul>
        </div>
      </div>
      <div class="one four">
        <div style="height: 54px; margin: 20px 10px 0px 10px; ">
          <ul v-for="(item, index) in CountData" :key="item.type">
            <li style="list-style: none" v-if="index == 3">
              {{ item.type }}
            </li>
          </ul>
        </div>
        <div style="height: 16px; margin: 0px 10px 0px 10px; text-align: right">
          <ul v-for="(item, index) in CountData" :key="item.type">
            <li style="list-style: none" v-if="index == 3">
              {{ item.value }}
            </li>
          </ul>
        </div>
      </div>
      <div class="one five">
        <div style="height: 54px; margin: 20px 10px 0px 10px; text-align: left">
          <ul v-for="(item, index) in CountData" :key="item.type">
            <li style="list-style: none" v-if="index == 4">
              {{ item.type }}
            </li>
          </ul>
        </div>
        <div style="height: 16px; margin: 0px 10px 0px 10px; text-align: right">
          <ul v-for="(item, index) in CountData" :key="item.type">
            <li style="list-style: none" v-if="index == 4">
              {{ item.value }}
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="body">
      <div class="left">
        <Map> </Map>
      </div>
      <div class="right">
        <div class="right_up">
          <div class="right_up_left">
            <C-221></C-221>
          </div>
          <div class="right_up_right">
            <C222></C222>
          </div>
        </div>
        <div class="right_down">
          <C223></C223>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入Map页面
import Map from "@/views/dashboard/components/Map.vue";
import C221 from "@/views/dashboard/components/C221.vue";
import C222 from "@/views/dashboard/components/C222.vue";
import C223 from "@/views/dashboard/components/C223.vue";
import { get } from "@/utils/request";

export default {
  // 注册成为组件
  components: {
    Map,
    C221,
    C222,
    C223,
  },
  data() {
    return {
      CountData: [],
    };
  },
  computed: {},
  methods: {
    async getCountData() {
      let res = await get("/count/countAll");
      console.log(res, "CountData");
      this.CountData = res.data;
    },
  },
  created() {
    this.getCountData();
  },
  mounted() {},
};
</script>
<style >



.body {
  height: calc(100vh - 150px);
  /* background-color: brown; */
  margin: 10px;
  display: flex;
}
.left {
  flex: 1;
  background-color: rgb(128, 114, 114);
}
.right {
  flex: 1;
  /* background-color: antiquewhite; */
  display: flex;
  flex-direction: column;
}
.right_up {
  flex: 1;
  /* background-color: rgb(36, 112, 179); */
  margin: 5px;
  display: flex;
}
.right_up_left {
  flex: 1;
  /* background-color: #fda065; */
  margin: 5px;
}
.right_up_right {
  flex: 1;
  /* background-color: #5f2222; */
  margin: 5px;
}
.right_down {
  flex: 1;
  /* background-color: rgb(36, 112, 179); */
  margin: 5px;
}
.head {
  height: 150px;
  /* background-color: aquamarine; */
  margin: 10px;
  display: flex;
}
.one {
  margin: 5px;
  list-style: none;
  font-size: 20px;
  
  color: white;
}
.one1 {
  /* background-color: #a9946d; */
   background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);

  flex: 1;
}
.two {
  flex: 1;
  /* background: #77a278; */
 background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}
.three {
  flex: 1;
  /* background: #784854; */
 background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}
.four {
  /* background: #5c7789; */
  background-image: linear-gradient(to top,#c4d8b9 0%,#a7d2e8 100% );
  flex: 1;
}
.five {
  /* background: #6c3b3b; */
  background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
  flex: 1;
}
</style>